<style lang="scss" scope>
// 引入公共变量及方法
// @import '~common/scss/public/base-url.scss';
.cont-head {
    width: 100%;
    padding: 15px 20px;
    box-sizing: border-box;
    // border-bottom: 20px solid #FFF;
    .head {
        padding: 10px;
        // background: #f5f5f5;
        color: #666;
        font-size: 18px;
        font-weight: 600;
        &:hover {
            color: #3C8DBC;
        }
    }
}

.process {
    .process-cont {
        overflow: hidden;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 #cfcfcf;
    }
    .process-step {
        min-height:400px;
        margin-left: 150px;
        padding-top: 15px;
        .process-ver {
            // margin-left:80px;
        }
    }
    .process-mid {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

.process-cont {
    .process-head {
        border-bottom: 1px solid #f1f1f1;
        color: #666;
        font-size: 18px;
        font-weight: 600;
        p {
            padding: 10px 30px;
        }
    }
    .process_title {
        width: 80px;
        float: left;
        vertical-align: top;
    }
    .process_filepath {
        word-wrap: break-word;
        width: 100%;
    }
}
</style>
<template>
    <div id='cmain'>
        <div class="process">
            <!-- <div class="cont-head">
                <div class="head">
                    <Row>
                        <Col span="24">流程监控</Col>
                    </Row>
                </div>
            </div> -->
            <div class="process-cont">
                <div class="process-head">
                    <!-- <p>任务名称</p> -->
                    <p>流程监控</p>
                </div>
                <div class="process-step">
                    <Row>
                        <div class="process_title">文件名称:</div>
                        <div style="width:100%;">
                            <div style="white-space:nowrap;">{{file}}</div>
                        </div>
                    </Row>
                    <Row style="margin-top:10px;">
                        <div class="process_title">文件路径:</div>
                        <div class="process_filepath">{{path}}</div>
                    </Row>
                    <Row>
                        <div class="process-mid">
                            <div class="process_title">运行流程:</div>
                            <div style="width:100%;">{{pipeline}}</div>
                        </div>
                    </Row>
                     <!-- <Row v-show="errorShow">
                        <div style="padding-bottom:10px;">
                            <div class="process_title">错误日志:</div>
                            <div style="width:100%;">
                                <a :href="downUrl+'/dchealth-platform/1.0/job/errorLogFileDownload?jobid='+this.$store.state.jobid" download class="download" style="padding:5px 15px;">下载错误日志</a> -->
                                <!-- <a :href="'http://42.123.124.204:8081/dchealth-platform/1.0/job/errorLogFileDownload?jobid='+this.$store.state.jobid" download class="download" style="padding:5px 15px;">下载错误日志</a>  -->
                            <!-- </div>
                        </div>
                    </Row>  -->
                    <Row>
                        <Col span="2" class="process_title">运行状态:</Col>
                        <Col span="12">
                        <div class="process-ver">
                            <Steps :current="currentStatus" direction="vertical" :status="runStatus">
                                <Step v-for="(item,index) in processData" :key="index" :title="item.execTool" :content="item.errorInfo">

                                </Step>
                            </Steps>
                        </div>
                        </Col>
                        <Col span="5">
                        <span>开始时间</span>
                        <p style="height:60px;color:#999;" v-for="(item,index) in processData" :key="index">{{item.beginTime}}</p>
                        </col>
                        <Col span="5">
                        <span>结束时间</span>
                        <p style="height:60px;color:#999;" v-for="(item,index) in processData" :key="index">{{item.overTime}}</p>
                        </col>
                    </Row>
                </div>

            </div>

        </div>
    </div>
</template>
<script>
// 引入任务管理方法
import { httpUrl } from 'common/js/Base';
import { task,tumourTask} from 'api/index.js'
import { getCookie } from '@/common/js/cookie.js'
export default {
    name: "process",
    data() {
        return {
            // 流程数据 
            processData: [],
            downUrl: httpUrl.downHttp,//下载地址
            // 当期状态
            currentStatus: -1,
            // 文件名称
            file: this.$store.state.file,
            // 文件路径
            path: this.$store.state.path,
            // 流程
            pipeline: this.$store.state.pip,
            //运行错误
            runStatus: 'process',
            //错误下载显示
            errorShow: false,
        }
    },
    // 实例创建时
    created() {
        this.getCurrentStep()
    },
    watch: {

    },
    filters: {
        // 格式化数据
        // statusFlag(cellValue) {
        //     if(cellValue=='1'){
        //         return cellValue = "完成"
        //     }else if(cellValue=='2') {
        //         return cellValue = "正在运行"
        //     }else if(cellValue=='3') {
        //         return cellValue = "未执行"
        //     }else if(cellValue=='4') {
        //         return cellValue = "错误"
        //     }
        // },
    },
    methods: {
        // 获取运行流程列表
        getCurrentStep() {
            let obj = {
                jobid: this.$store.state.jobid,
                // jobid:"a3e8c87a17584802b4817da2b1325537",
                userId: getCookie('userid')
            }
            let taskUrl = task;
            if(this.$store.state.productId == 3){
                taskUrl = tumourTask;
            }
            taskUrl.getCurrentStep(obj).then((data) => {
                console.log(JSON.stringify(data));
                if (data.returnCode == 0 || data.returnCode == 200) {
                    this.processData = data.data.execTools;
                    console.log(this.processData)
                    // 设置当前正在执行的状态
                    M.each(this.processData, (item, index) => {
                        if (item.status == 4) {
                            this.currentStatus = Number(index);
                            this.runStatus = "error";
                            this.errorShow = true;
                        } else if (item.status == 2) {
                            this.currentStatus = Number(index);
                        }
                    })
                } else if (data.returnCode == 422 || data.returnCode == 204) {
                    this.$router.push('/login')
                } else {
                    this.$Message.error(data.msg)
                }
            })
        }
    }
}

</script>